<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>原神信息查询小书签</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.css">
    <style>
        .bs-docs-header, .bs-docs-masthead {
            position: relative;
            padding: 30px 0;
            color: #BFD8E3;
            text-align: center;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
            background-color: #7178C2;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#7178C2), to(#6F94BE));
            background-image: -webkit-linear-gradient(top, #7178C2 0, #6F94BE 100%);
            background-image: -o-linear-gradient(top, #7178C2 0, #6F94BE 100%);
            background-image: linear-gradient(to bottom, #7178C2 0, #6F94BE 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7178C2', endColorstr='#6F94BE', GradientType=0);
            background-repeat: repeat-x;
        }

        .bs-docs-header {
            margin-bottom: 40px;
            font-size: 20px
        }

        .bs-docs-header h1 {
            margin-top: 0;
            color: #fff
        }

        .bs-docs-header p {
            margin-bottom: 0;
            font-weight: 300;
            line-height: 1.4
        }

        .bs-docs-header .container {
            position: relative
        }

        @media (min-width: 768px) {
            .bs-docs-header {
                padding-top: 60px;
                padding-bottom: 60px;
                font-size: 24px;
                text-align: left
            }

            .bs-docs-header h1 {
                font-size: 60px;
                line-height: 1
            }
        }

        @media (min-width: 992px) {
            .bs-docs-header h1, .bs-docs-header p {
                margin-right: 380px
            }
        }

        .bookmark-drop-btn {
            background: url(./img/1.png) no-repeat 0 0;
            cursor: move;
            display: block;
            height: 56px;
            width: 290px;
            margin: 25px 0 0;
        }

        .bookmark-drop-btn span {
            display: none;
        }

        .btn-mine {
            color: #fff;
            background-color: #4989ea;
            border-color: #4989ea;
        }
    </style>
</head>
<body>
<header class="navbar navbar-static-top bs-docs-nav">
    <div class="container">
        <div class="navbar-header">
            <a href="https://bbs.mihoyo.com/ys/" rel="noreferrer" target="_blank" class="navbar-brand">
                <img src="https://webstatic.mihoyo.com/ys/event/e20210721-fab/images/logo.2c7c1290.png" alt=""
                     style="margin-left: -12px;margin-top: -15px;">
            </a>
        </div>
    </div>
</header>
<div class="bs-docs-header" id="content" tabindex="-1">
    <div class="container">
        <h1>信息查询小书签</h1>
        <p>通过UID查询用户角色信息与深境螺旋记录</p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-9" role="main">
            <h1 class="page-header">使用方法</h1>
            <p>只要将下面图片拖动到浏览器的书签栏</p>
            <p>然后在 <a href="https://bbs.mihoyo.com/ys/" target="_blank">原神米游社页面</a> 点击书签，在弹框中输入你要查询的UID就能查询了</p>
            <ul>
                <li>必须要登录后才能查询</li>
                <li>米游社限制一个用户一天最多只能查询30个UID</li>
            </ul>
            <a href="javascript:void (function(a,d){d=document.createElement('script');d.src=a;document.body.appendChild(d)})('https://babalae.github.io/bookmarklet/ysq.js')"
               class="bookmark-drop-btn" alt="拖动我到书签栏">
                <span>❤原神信息查询</span>
            </a>
            <h1 class="page-header">开源代码</h1>
            <p>小书签: <a href="https://github.com/babalae/genshin-info" target="_blank">GitHub</a></p>
            <p>查询结果渲染: <a href="https://github.com/babalae/genshin-info" target="_blank">GitHub</a></p>
        </div>
        <div class="col-md-3">
            <img src="./img/2.png" alt="说明">
        </div>
    </div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-80358493-3"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-80358493-3');
</script>

</body>
</html>
